import React, { Component } from 'react'

// !!!!! 注意:
// 1. 开发模式下,还是会将错误冒泡到window,也就意味着虽然降级渲染会实现,但是页面中最终仍然渲染错误信息. 在生产模式下就没有这个问题

// 2. 错误边界无法捕获以下场景中产生的错误：
// 2.1 事件处理（了解更多）
// 2.2 异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）
// 2.3 服务端渲染
// 2.4 它自身抛出来的错误（并非它的子组件）

export default class BoundariesDemo extends Component {
  constructor(props: any) {
    super(props)
    this.state = { hasError: false }
  }

  static getDerivedStateFromError(error: any) {
    console.log('getDerivedStateFromError执行了:', error)
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true }
  }

  render() {
    if ((this.state as any).hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <h1>Something went wrong.</h1>
    }
    return (this.props as any).children
  }
  componentDidCatch(error: any, errorInfo: any) {
    console.log('componentDidCatch执行了:', error)
    console.log(error, errorInfo)
  }
}
